import { observer } from 'mobx-react';
import React, { Component } from 'react';
import { ListViewPage } from 'weaver-mobile-page';
import ActivityIndicator from '../activity-indicator';
import './index.less';

@observer
export default class ListView extends Component {
  static defaultProps;
  list = React.createRef();
  state = {
    height: "100%"
  };

  componentDidMount() {
    const container = this.list.current;

    if (container) {
      this.setState({ 
        height: container.offsetHeight 
      });
    }
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.visible !== nextProps.visible && nextProps.visible) {
      setTimeout(() => {
        const container = this.list.current;

        if (container) {
          this.setState({
            height: container.offsetHeight
          });
        }
      });
    }
  }

  render() {
    const { store } = this.props;
    const { height } = this.state;

    if (store && store.fullLoading.get()) {
      return <ActivityIndicator />;
    }

    return (
      <div className='wm-ef-list-view-page' ref={this.list}>
        <ListViewPage.Normal
          pullToRefresh={null}
          customHeight={height}
          {...this.props}
        />
      </div>
    );
  }
}
